<template>
  <!-- 登录表单的容器 -->
  <div class="login_container">
    <img src="../assets/img/bg.png" alt="" width="100%" height="100%">
    <!-- 登录区域 -->
    <div class="login_box">
      <!-- 头像 -->
      <div class="avater_box">
        <img src="../assets/img/hospitalLogo.png" alt="" />
      </div>
      <!-- 表单 -->
      <div>
        <div style="margin :80px 80px;padding: 10px">
        <el-tag>人民医院预约挂号系统</el-tag>
        <el-tag type="success">便捷</el-tag>
        <el-tag type="danger">大家都在用</el-tag>

        </div>
        <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginForm"
          label-width="0px"
          class="login_form"

        >
          <el-form-item  prop="userName">
            <el-input v-model="loginForm.userName" placeholder="请输入用户名称" prefix-icon="el-icon-user-solid"></el-input>
          </el-form-item>
          <el-form-item  prop="password">
            <el-input v-model="loginForm.password" placeholder="请输入登录密码" prefix-icon="el-icon-lock" show-password></el-input>
          </el-form-item>
         <!--  <el-form-item prop="verifyCode">
            <div class="verifyCode_box">
              <el-input v-model="loginForm.verifyCode" placeholder="请输入手机验证码" prefix-icon="el-icon-mobile" class="verifyCode"></el-input>
              <img src="../assets/img/msFXK1.gif" alt="" class="verifyCode_img">
            </div>
          </el-form-item> -->
         
          
          <el-form-item class="login_btn">
            <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
            <el-button type="success" @click="show">注册</el-button>
            <el-button @click="resetForm('loginForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      
    </div>
             <InsertInformation :addOrUpdateVisible="addOrUpdateVisible" @changeShow="showAddOrUpdate" ref="addOrUpdateRef"></InsertInformation>
 
  </div>
</template>

<script>
  import { mapMutations } from 'vuex'
  import { USERLOGIN, USERLOGOUT } from '../store/types'
  import { doLogin } from '../api/login'
  import  InsertInformation from '../views/user/InsertInformation'
export default {
  name: "Login",
  components:{
    InsertInformation
  },
  data() {
    return {
      addOrUpdateVisible:false,
      loginForm: {
        userName: "",
        password: "",
        verifyCode: "",
      },
      loginRules: {
        userName: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 1, max: 15, message: "长度在 1 到 15 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          { min: 3, max: 15, message: "长度在 3 到 15 个字符", trigger: "blur" },
        ],
        /* verifyCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ] */
      }
    };
  },
  methods: {
     ...mapMutations([USERLOGIN, USERLOGOUT]),
    /* submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push("/main");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }, */
    submitForm(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        const res = await doLogin(this.loginForm)
                        console.log(res)
                        // 登录失败
                        if (res.data.code !== 200) {
                            return this.$message.error({
                                showClose: true,
                                message: res.data.message,
                                center: true,
                                duration: 1000
                            })
                        }
                        // 登录成功
                        this.$message.success({
                            showClose: true,
                            message: res.data.message,
                            center: true,
                            duration: 1000
                        })
                        // 保存token 用于权限验证
                        this[USERLOGIN](res.data.token);
                        this.$router.push('/welcome');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
     //按钮点击事件，显示新增编辑弹窗
    show(){
      this.addOrUpdateVisible = true
    },
    //监听子组件弹窗关闭后触发，
    showAddOrUpdate(data){
      if(data === 'false'){
        this.addOrUpdateVisible = false
      }else{
        this.addOrUpdateVisible = true
      }
    }
  },
};
</script>

<style lang="less" scoped>
.login_container {
  height: 100%;
  // background-color: aquamarine;
  width: 100%;
}

.login_box {
  width: 450px;
  height: 380px;
  background-color: #ffffff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  

.avater_box {
  width: 100px;
  height: 100px;
  border: 1px solid #eeeeee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: -65px auto;
  background-color: #ffffff;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eeeeee;
  }
}


.login_form{
  position: absolute;
  bottom: 10px;
  width: 100%;
  padding: 0px 20px;
  box-sizing: border-box;

  .login_btn{
    display: flex;
    justify-content: flex-end;
  }



  /* .verifyCode_box{
  display: flex;
    .verifyCode{
    width: 70%;
    justify-content: left;
      }
    }
  
  .verifyCode_img{
    width: 30%;
    height: 45px;
    justify-content: flex-end;
    } */

  }
}


</style>